<template>
  <div>
    <div class="rightcon">
      <!-- 我点过的歌 -->
      <div v-if="act == 'my_songs'" class="playing_songs my_songs search_songs">
        <h3>我点过的歌</h3>
        <ul>
          <li v-for="item in mysongslist" :key="item.mid">
            <div class="left">
              <h3>{{ item.name }}</h3>
              <p>歌手:{{ item.singer }}</p>
            </div>
            <div class="btns">
              <div class="button" @click="open1(item.mid)" type="primary">
                点歌
              </div>
              <div class="button del" @click="del(item.mid)" type="primary">
                删除
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <home></home> -->
  </div>
</template>

<script>
import { search, songList, mySongList, addSong } from "@/api/search/index";
import { deleteMySong } from "@/api/my_songs/index";
import home from "@/views/home";
export default {
  components: {
    home,
  },

  data() {
    return {
      roomdata: [],
      messagelist: [],
      inputtext: "",
      sortdata: [
        {
          path: "search_songs",
          icon: "el-icon-s-claim",
          title: "点歌",
        },
        {
          path: "playing_songs",
          icon: "el-icon-s-management",
          title: "已点",
        },
        {
          path: "my_songs",
          icon: "el-icon-s-order",
          title: "歌单",
        },
        {
          path: "hot_rooms",
          icon: "el-icon-s-home",
          title: "房间",
        },
      ],
      input: "",
      songslist: [],
      alreadylist: [],
      mysongslist: [],
      hotrooms: [],
      act: "my_songs",
    };
  },

  created() {
    // 获取已经点过的歌曲
    mySongList({
      access_token: localStorage.getItem("access_token"),
      plat: "pc",
      version: 10000,
    }).then((res) => {
      console.log(res);
      this.mysongslist = res.data;
    });
  },

  mounted() {},

  methods: {
    // 点歌
    open1(id) {
      console.log(id);
      addSong({
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
        mid: id,
        at: 10000,
        room_id: localStorage.getItem("room_id"),
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$notify({
            title: "添加成功",
            message: "已成功添加至歌单",
            type: "success",
          });
        } else if (res.code == 500) {
          this.$notify({
            title: "点歌失败",
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    //删除
    del(id) {
      console.log(id);
      deleteMySong({
        access_token: localStorage.getItem("access_token"),
        mid: id,
        plat: "pc",
        version: 10000,
        room_id: localStorage.getItem("room_id"),
        at: 10000,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$notify({
            title: "删除成功",
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    // 搜索歌曲
    getsongs() {
      search({
        keyword: this.input,
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
      }).then((res) => {
        console.log(res);
        this.songslist = res.data;
      });
    },
    // 获取已点歌曲
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.rightcon {
  // 搜索歌曲列表
  .search_songs {
    width: 360px;
    height: 800px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 22;
    h3 {
      width: 320px;
      text-align: left;
      padding: 10px 20px;
      background-color: #fff;
    }
    .search {
      width: 360px;
      background-color: #fff;
      padding: 20px 0;
      padding-top: 10px;
      .el-input {
        width: 240px;
        margin-right: 10px;
      }
    }
    ul {
      list-style: none;
      width: 340px;
      height: 684px;
      margin: 0 auto;
      padding: 0;
      overflow: auto;
      li {
        width: 270px;
        background-color: #fff;
        border-radius: 6px;
        margin-top: 10px;
        padding: 0 20px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        &:last-child {
          margin-bottom: 20px;
        }
        .left {
          text-align: left;
          h3 {
            float: left;
            width: 200px;
            padding: 0;
            font-size: 14px;
            color: #999;
            padding: 6px 0;
          }
          p {
            width: 200px;
            padding: 6px 0;
            float: left;
            font-size: 12px;
          }
        }
        .btn {
          width: 150px;
          height: 30px;
          background-color: #409eff;
          border-radius: 6px;
          text-align: center;
          line-height: 30px;
          color: #fff;
          margin-top: 15px;
          font-size: 12px;
        }
      }
    }
  }

  // 已点区域显示
  .playing_songs {
    ul {
      height: 730px;
      li {
        width: 280px;
        padding: 0 10px;
        .left {
          p {
            padding: 2px 0px;
          }
        }
      }
    }
    h3 {
      .btn {
        float: right;
        font-size: 10px;
        background-color: #333;
        padding: 6px;
        color: #fff;
        border-radius: 4px;
        font-weight: 400;
        cursor: pointer;
      }
    }
    .btns {
      overflow: hidden;
      height: 69px;
      .button {
        width: 60px;
        float: left;
        padding: 3px;
        background-color: #5eadff;
        margin-top: 6px;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
      }
      .button:first-child {
        margin-top: 10px;
      }
      .button:last-child {
        background-color: #ff6700;
      }
    }
  }
  // 点过的歌
  .my_songs {
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    ul {
      li {
        width: 300px;
        .left {
          h3 {
            width: 200px;
          }
          p {
            width: 200px;
            padding: 12px 0;
          }
        }
        .btns {
          .button {
            cursor: pointer;
          }
        }
      }
    }
  }
  // 热门房间
  .hot_rooms {
    ul {
      height: 670px;
      li {
        .topcon {
          width: 310px;
          height: 26px;
          display: flex;
          justify-content: space-between;
          padding: 5px 0;
          line-height: 26px;
          margin-bottom: 10px;
          overflow: hidden;
          .left {
            i {
              float: left;
              color: #ff6700;
              font-weight: 600;
            }
            h3 {
              float: left;
              font-size: 14px;
              padding: 0;
              margin-left: 10px;
              color: #000;
              margin-top: -5px;
            }
          }
          p {
            height: 10px;
            padding: 5px;
            line-height: 10px;
            border: 1px solid #eee;
            background-color: rgba(223, 223, 223, 0.6);
            border-radius: 4px;
            font-size: 12px;
            margin-right: 10px;
          }
        }
        .bottom-con {
          display: flex;
          justify-content: space-between;
          margin: 10px 0;
          img {
            width: 40px;
            height: 40px;
            border-radius: 4px;
          }
          .right {
            text-align: left;
            margin-left: 10px;
            .one {
              .online {
                color: #ff6700;
                margin-right: 10px;
              }
              .name {
                line-height: 12px;
                font-size: 16px;
              }
            }
            p {
              margin-top: 4px;
              width: 260px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>